<template>
  <div>
      <div class="head-container">
          <el-form :inline="true" :model="formData" class="head-container">
              <el-form-item>
                  <el-input placeholder="科室名称/科室编号" v-model="formData.departmentNameOrId"></el-input>
              </el-form-item>
              <el-form-item label="科室类型">
                  <el-select v-model="formData.departmentType" placeholder="科室类型">
                      <!-- 这里可以根据实际需求添加科室类型选项 -->
                  </el-select>
              </el-form-item>
              <el-form-item label="状态">
                  <el-select v-model="formData.status" placeholder="状态">
                      <!-- 这里可以根据实际需求添加状态选项 -->
                  </el-select>
              </el-form-item>
              <el-form-item>
                  <el-button type="primary" size="mini" class="left-btn" @click="inquireBtn()">查询</el-button>
              </el-form-item>
              <el-form-item>
                  <el-button type="primary" size="mini" class="left-btn" @click="selectDelete()">新增</el-button>
              </el-form-item>
          </el-form>
      </div>
      <el-table :data="tableData" style="width: 100%">
          <el-table-column type="index"></el-table-column>
          <el-table-column prop="departmentName" label="科室名称"></el-table-column>
          <el-table-column prop="departmentId" label="科室编号"></el-table-column>
          <el-table-column prop="departmentType" label="科室类型"></el-table-column>
          <el-table-column prop="description" label="科室简介"></el-table-column>
          <el-table-column prop="status" label="状态">
              <template slot-scope="scope">
                  <el-switch v-model="scope.row.status"></el-switch>
              </template>
          </el-table-column>
          <el-table-column label="操作">
              <template slot-scope="scope">
                  <el-button type="text" @click="edit(scope.row)">编辑</el-button>
                  <el-button type="text" @click="deleteRow(scope.row)">删除</el-button>
              </template>
          </el-table-column>
      </el-table>
  </div>
</template>

<script>
export default {
  data() {
      return {
          formData: {
              departmentNameOrId: '',
              departmentType: '',
              status: ''
          },
          tableData: [
              {
                  departmentName: "康复一科",
                  departmentId: "KF001",
                  departmentType: "康复治疗",
                  description: "专注于运动康复的科室",
                  status: false
              },
              {
                  departmentName: "康复二科",
                  departmentId: "KF002",
                  departmentType: "康复治疗",
                  description: "专注于神经康复的科室",
                  status: true
              }
          ]
      };
  },
  methods: {
      inquireBtn() {
          // 这里添加查询方法，调用接口获取科室数据
          console.log('查询科室数据', this.formData);
      },
      selectDelete() {
          // 这里添加新增方法，调用接口添加科室数据
          console.log('新增科室数据');
      },
      edit(row) {
          // 这里添加编辑方法，调用接口编辑科室数据
          console.log('编辑科室数据', row);
      },
      deleteRow(row) {
          // 这里添加删除方法，调用接口删除科室数据
          console.log('删除科室数据', row);
      }
  }
};
</script>

<style>
/* 可以在这里添加样式 */
.head-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.el-form-item {
  margin-right: 15px;
}

.el-table {
  border-collapse: collapse;
}

.el-table th {
  background-color: #f0f0f5;
  text-align: center;
}

.el-table td {
  text-align: center;
}
</style>